<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- 这会抛出一个错误，因为属性 todo 此时，没有在该实例上定义 -->
        <!-- <li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}</li> -->
        <!-- 如果 `v-if` 需要访问 `v-for` 的变量 -->
        <template v-for="todo in todos">
          <li v-if="!todo.isComplete">{{ todo.name }}</li>
        </template>
      </ul>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      const { createApp, reactive } = Vue;

      // Vue3 中当 `v-if` 和 `v-for` 同时存在于一个元素上的时候，`v-if` 比 `v-for` 的优先级更高。
      // Vue2恰恰相反。
      createApp({
        setup() {
          const todos = reactive([
            {
              name: "张三",
              isComplete: false,
            },
            {
              name: "李四",
              isComplete: true,
            },
          ]);

          return {
            todos,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
